<template>
  <div class="about">
    <h1>dialog</h1>
    <el-button type="text" @click="handleShowDialog">点击打开 Dialog</el-button>
    <checkout
      :isShowCheckout="isShowCheckout"
      @close-checkout="closeCheckout"
    ></checkout>
  </div>
</template>
<script>
import checkout from "@/components/checkout";
export default {
  components: {
    checkout,
  },
  data() {
    return {
      //dialog显示隐藏
      dialogVisible: false,
      isShowCheckout: true,
    };
  },
  methods: {
    //   弹框
    handleShowDialog() {
      this.isShowCheckout = true;
    },
    closeCheckout() {
      this.isShowCheckout = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
::v-deep .el-dialog__header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn {
    position: absolute;
    top: 16px;
    right: 20px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 16px;
  }
  padding: 13px 20px 10px;
  background: linear-gradient(to bottom, #91c2f9 0%, #74adf7 100%);
  //   overflow: hidden;
  font-size: 15px;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
::v-deep .el-checkbox-group {
  font-size: 0;
  padding-bottom: 15px;
  padding-left: 25px;
}
</style>
